var vm = Vue.createApp({
    data() {
        return {
            // 用于装载的收藏夹加载的数据
            collectList: [],
            // 用对象去收集数据
            collect: {
                categoryId: "",
                iconlink: "",
                hreflink: "",
                status: 1,
                sorted: 1
            },
            changeFlag:false,
            currentIndex: -1,
            currentTIndex: -1,
            collectIndex: -1,
            optionobj: {},
            optionarr:[],
            // 控制添加盒子隐藏和显示
            expandAddFlag: false
        }
    },

    // 生命周期
    created() {
        // 1: 执行收藏夹数据的初始化
        this.loadCollect();
    },

    methods: {
        // 1：查询收藏夹的数据
        async loadCollect() {
            try {
                var res = await axios.get("/api/collect/load");
                this.collectList = res.data;
                // 方式1：
                //this.optionarr = this.collectList.map(c => ({id:c.categoryId,name:c.categoryTitle}));
                // 方式2：
                this.collectList.forEach(c=>{
                    this.optionarr.push({id:c.categoryId,name:c.categoryTitle});
                })
            } catch (e) {
                alert("出现异常了...")
            }
        },

        async delItem(index, cindex) {
            if (confirm("你确定要抛弃我吗？")) {
                var id = this.collectList[index].collectList[cindex].id;
                var res = await axios.post("/api/collect/del/" + id);
                if (res.data) {
                    alert("删除成功!!!!")
                    // 删除元素
                    this.collectList[index].collectList.splice(cindex, 1);
                }
            }
        },

        // 关闭添加框
        closeAddBox() {
            if (confirm("你确定要关闭我吗？")) {
                this.expandAddFlag = false;
            }
        },

        // 2：控制添加盒子隐藏和显示
        expandAddBox(index) {
            // 点击添加的时候，是添加的那个分类信息
            var cid = this.collectList[index].categoryId;
            var ctitle = this.collectList[index].categoryTitle;
            // 记录你当前操作的分类，方便你后续的追加和控制
            this.currentIndex = index;
            // 因为select的value是 {id:zxx,name:""}的格式，我们只要组装和他一样的格式，就自动选中select的options
            this.optionobj = {id: cid, name: ctitle};
            // 顺便给添加的collect赋值我们分类id和分类标题
            this.collect.categoryId = cid;
            this.collect.categoryTitle = ctitle;
            // 展开添加框
            this.expandAddFlag = true;
        },

        // 点击编辑
        editItem(index, cindex) {
            // 你操作的是拿个收藏数据
            this.currentIndex = index;
            this.collectIndex = cindex;
            // 修改数据，只要复制给data的collect就触发vue数据渲染同步
            this.collect = {...this.collectList[index].collectList[cindex]};
            // 因为select的value是 {id:zxx,name:""}的格式，我们只要组装和他一样的格式，就自动选中select的options
            this.optionobj = {id: this.collect.categoryId, name: this.collect.categoryTitle};
            // 展开添加框
            this.expandAddFlag = true;
        },

        // 3：选择分类的获取分类id和分类标题，用于添加和修改使用
        selectOption($event) {
            this.currentTIndex = $event.target.selectedIndex - 1;
            this.changeFlag = true;
            this.collect.categoryId = this.optionobj.id;
            this.collect.categoryTitle = this.optionobj.name;
        },

        // 4：开始保存收藏
        async saveCollect() {
            try {
                var res = await axios.post("/api/collect/saveupdate", this.collect);
                if (this.collect.id) {
                    alert("修改成功");
                    // 追加数据到目标元素盒子
                    if(!this.changeFlag) {//如果不修改分类，就直接覆盖元素本身即可。
                        this.collectList[this.currentIndex].collectList[this.collectIndex] = res.data;
                    }else{// 如果你修改了分类，就把你这个追加到另外一个分类即可
                        // this.currentTIndex 是记录你新选择的分类索引，代表收藏数据会添加到这个新的分类下面来/
                        this.collectList[this.currentTIndex].collectList.push(res.data);
                        // 把原来分类上面的收藏数据进行移除
                        this.collectList[this.currentIndex].collectList.splice(this.collectIndex,1);
                    }
                    // 重置数据
                    this.resetData();
                    // 关闭添加框
                    this.expandAddFlag = false;
                } else {
                    // 异步请求
                    alert("添加数据成功!!!!");
                    // 追加数据到目标元素盒子
                    this.collectList[this.currentIndex].collectList.push(res.data);
                    // 重置数据
                    this.resetData();
                }
            } catch (e) {
                alert("添加失败...")
            }
        },

        resetData() {
            this.collect = {
                categoryId: "",
                iconlink: "",
                hreflink: "",
                status: 1,
                sorted: 1
            };
        }

    }
}).mount("#app");